﻿<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="img/favicon.ico">

    <title>Destination Single 1 : VoyageTime</title>

    <!-- Bootstrap core CSS -->
    <link href="css/vendor/bootstrap.min.css" rel="stylesheet">

    <link href="css/vendor/simple-line-icons.css" rel="stylesheet">
    <link href="css/vendor/themify-icons.css" rel="stylesheet">
    <link href="css/vendor/owl.carousel.css" rel="stylesheet">
    <link href="css/vendor/animate.css" rel="stylesheet">
    <link href="css/vendor/viewbox.css" rel="stylesheet"> 
    <link href="css/vendor/bootstrap-slider.min.css" rel="stylesheet">
    <link href="css/vendor/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <script src="js/vendor/fontawesome-all.min.js"></script>

    <link href="css/scss/main.css" rel="stylesheet">
  </head>

  <body>

    <!-- pageloader -->
    <div id="loader">
      <div class="loader">
        <div class="sk-child sk-dot1"></div>
        <div class="sk-child sk-dot2"></div>
      </div>
    </div>
    <!-- / #pageloader -->

    <nav id="contact-menu" class="navigation navigation-hidden navigation-portrait">
      <div class="nav-menus-wrapper">
        <div class="header-info-item clearfix">
          <p class="header-info-title">Contact Us</p>
          <ul>
            <li><span class="ti-map-alt"></span> 610 Broadway New York, NY 10012</li>
            <li><span class="ti-headphone-alt"></span> <a href="tel:1800-2345-5677">1800-2345-5677</a></li>
            <li><span class="ti-mobile"></span> <a href="tel:1800-2345-5678">1800-2345-5678</a></li>
            <li><span class="ti-email"></span> <a href="mailto:info@voyagetime.com">info@voyagetime.com</a></li>
          </ul>
        </div>
        <div class="header-info-item clearfix">
          <p class="header-info-title">Work Time</p>
          <ul>
            <li><span class="ti-alarm-clock"></span> Working Days  9AM - 9PM</li>
            <li><span class="ti-alarm-clock"></span> Saturday  10AM - 8PM</li>
            <li><span class="ti-alarm-clock"></span> Sunday  Closed</li>
          </ul>
        </div>
        <div class="header-info-item clearfix">
          <p class="header-info-title">Follow Us</p>
          <ul class="header-social">
            <li><a href="#"><span class="ti-facebook"></span></a></li>
            <li><a href="#"><span class="ti-instagram"></span></a></li>
            <li><a href="#"><span class="ti-twitter"></span></a></li>
            <li><a href="#"><span class="ti-youtube"></span></a></li>
            <li><a href="#"><span class="ti-pinterest"></span></a></li>
          </ul>
        </div>
      </div>
    </nav>

    <header>
      
      <div class="main-header">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-4">
              <div class="main-header-logo">
                <a href="index.html"><img width="130" src="img/logo-white.png" alt="Site logo"></a>
              </div>
            </div>
            <div class="col-md-7 col-8">
              <div class="clearfix float-right contact-head">
                <a href="tel:1800-2345-5677">1800-2345-5677</a>
                <button class="btn-show navbar-toggler float-right btn-contact"><span class="ti-menu"></span></button>
              </div>
              <nav id="navigation" class="navigation mt-10">
                <div class="nav-toggle">Menu</div>
                <div class="nav-search">
                  <div class="nav-search-button">
                   <span class="ti-search"></span>
                  </div>
                  <form>
                    <div class="nav-search-inner">
                      <input type="search" name="search" placeholder="Type and hit ENTER"/>
                    </div>
                  </form>
                </div>

                <div class="nav-menus-wrapper">

                  <ul class="nav-menu align-to-right">
                    <li><a href="#">Home</a>
                      <ul class="nav-dropdown">
                        <li><a href="index.html">Home Style 1</a></li>
                        <li><a href="home-style-2.html">Home Style 2</a></li>
                        <li><a href="home-style-3.html">Home Style 3</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Tours</a>
                      <ul class="nav-dropdown">
                        <li><a href="#">Tour List</a>
                          <ul class="nav-dropdown">
                            <li><a href="tour-list-1.html">Tour List 1</a></li>
                            <li><a href="tour-list-2.html">Tour List 2</a></li>
                            <li><a href="tour-list-3.html">Tour List 3</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Tour Single</a>
                          <ul class="nav-dropdown">
                            <li><a href="tour-single-1.html">Tour Single 1</a></li>
                            <li><a href="tour-single-2.html">Tour Single 2</a></li>
                            <li><a href="tour-single-3.html">Tour Single 3</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li><a href="#">Destinations</a>
                      <ul class="nav-dropdown">
                        <li><a href="destination-list-1.html">Destination List 1</a></li>
                        <li><a href="destination-list-2.html">Destination List 2</a></li>
                        <li><a href="destination-single-1.html">Destination Single 1</a></li>
                        <li><a href="destination-single-2.html">Destination Single 2</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Pages</a>
                      <ul class="nav-dropdown">
                        <li><a href="special-page-about-us.html">About Us</a></li>
                        <li><a href="slider-page.html">Slider Page</a></li>
                        <li><a href="simple-page.html">Simple Page</a></li>
                        <li><a href="coming-soon.html">Coming Soon</a></li>
                        <li><a href="special-page-404.html">404 Page</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Blog</a>
                      <ul class="nav-dropdown">
                        <li><a href="blog-page-1.html">Blog List 1</a></li>
                        <li><a href="blog-page-2.html">Blog List 2</a></li>
                        <li><a href="blog-single-page-1.html">Blog Single</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Elements</a>
                      <div class="megamenu-panel">
                        <div class="megamenu-lists">
                          <ul class="megamenu-list list-col-3">
                            <li><a href="elements-heading.html">Headings</a></li>
                            <li><a href="elements-blockquotes.html">Blockquotes</a></li>
                            <li><a href="elements-dropcaps.html">Dropcaps</a></li>
                            <li><a href="elements-seporators.html">Seporators</a></li>
                            
                          </ul>
                          <ul class="megamenu-list list-col-3">
                            <li><a href="elements-icons.html">Icons</a></li>
                            <li><a href="elements-buttons.html">Buttons</a></li>
                            <li><a href="elements-infography.html">Infography</a></li>
                            <li><a href="elements-call-to-action.html">Call-to-action</a></li>
                          </ul>
                          <ul class="megamenu-list list-col-3">
                            <li><a href="elements-testimonials.html">Testimonials</a></li>
                            <li><a href="elements-tabs&accordions.html">Tabs & Accordions</a></li>
                            <li><a href="elements-team.html">Team</a></li>
                            <li><a href="elements-section-title.html">Section Title</a></li>
                          </ul>
                      
                        </div>
                      </div>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div> 
      </div>
    </header>

    <!-- / header -->
    
    <!-- page-head -->

    <div class="page-head white-content">
      <div class="height50vh parallax-container" style="background-image: url(img/image-12.jpg);">
        <div class="page-head-wrap">
          <div class="display-r">
            <div class="display-a">
              <div class="container">
                <div class="row justify-content-center animate" data-animation="fadeInUp" data-timeout="500">
                  <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Destinations</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Destination Single 1</li>
                      </ol>
                    </nav>
                    <h1 class="big-title mt-60">Destination Single 1</h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- / page-head -->

    <!-- content -->
    
    <div class="content mt-50 mb-40 container">
      <div class="row">
        <div class="col-md-12">
          <!-- tab-1 -->
          <div class="tab-1">
            <div class="text-right">
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab-1" role="tab" aria-selected="true">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tab-2" role="tab" aria-selected="false">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab-3" role="tab" aria-selected="false">Map</a>
                </li>
              </ul>
            </div>
            
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="home-tab">
                
                <div class="row">
                  <div class="col-md-6">
                    <img src="img/image-12.jpg" alt="Image">
                  </div>
                  <div class="col-md-6">
                    <h2>Everything You Need to Know About Bali</h2>
                    <p>Bali is a living postcard, an Indonesian paradise that feels like a fantasy. Soak up the sun on a stretch of fine white sand, or commune with the tropical creatures as you dive along coral ridges or the colorful wreck of a WWII war ship. The “artistic capital” of Ubud is the perfect place to see a cultural dance performance, take a batik or silver-smithing workshop, or invigorate your mind and body in a yoga class.</p>
                    <p>In Bali’s farther and lesser travelled East Bali and northern region, you’ll find some world-class diving spots with calm bays. The island’s centre also offers plenty of reasons that it can be better than the beach. </p>
                    <p>The town itself is densely dotted with a multitude of ancient temples, palaces and historical sites. There are many more off-the-beaten-track spots around this magical island worth discovering.</p>
                  </div>
                </div>

              </div>
              <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="profile-tab">
                <div class="row">
                  <div class="col-md-6">
                    <h4>Natural Attractions</h4>
                    <p>Bali's natural attractions are many, both on land and sea. The mountainous north-central part of the island, crowned by 10,000-foot Mount Batur and Mount Agung, can be explored by road or, more adventurously, on foot, taking visitors past fast rivers, crater lakes and deep rain forests.</p>
                    <h4>Balinese Food</h4>
                    <p>Bali's natural attractions are many, both on land and sea. The mountainous north-central part of the island, crowned by 10,000-foot Mount Batur and Mount Agung, can be explored by road or, more adventurously, on foot, taking visitors past fast rivers, crater lakes and deep rain forests.</p>
                    <h4>The Nightlife of Bali</h4>
                    <p>Bali's natural attractions are many, both on land and sea. The mountainous north-central part of the island, crowned by 10,000-foot Mount Batur and Mount Agung, can be explored by road or, more adventurously, on foot, taking visitors past fast rivers, crater lakes and deep rain forests.</p>

                  </div>
                  <div class="col-md-6">
                    <img src="img/image-13.jpg" alt="Image">
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="tab-3" role="tabpanel" aria-labelledby="contact-tab">
                <iframe src="http://www.google.cn/maps/embed?pb=!1m18!1m12!1m3!1d1010290.7975268234!2d114.51105816599815!3d-8.455697404655568!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd22f7520fca7d3%3A0x2872b62cc456cd84!2sBali!5e0!3m2!1sen!2sby!4v1535545548975" width="600" height="450" style="border:0" allowfullscreen></iframe>
              </div>
            </div>
          </div>
          <!-- /.tab-1 -->

          <div class="text-center mt-20 mb-40">
            <h2>Popular Tours</h2>
          </div>


        </div>

        <div class="col-md-6 col-lg-3">
            <div class="tour-item">
              <a href="#">
                <div class="img-wrap">
                  <img src="img/distination-8.jpg" alt="">
                  <p class="price">1450 $</p>
                </div>
              </a>
              <div class="caption">
                <a href="#"><p class="title">Evening Ubud Tour with Cultural Performances</p></a>
                <p class="date"><span class="ti-calendar"></span>August 20, 2018</p>
                <p class="time"><span class="ti-time"></span>10 days</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-3">
            <div class="tour-item">
              <a href="#">
                <div class="img-wrap">
                  <img src="img/distination-7.jpg" alt="">
                  <p class="price"><span>1500 $</span>1250 $</p>
                </div>
              </a>
              <div class="caption">
                <a href="#"><p class="title">Private Partner Yoga Class & Thai Massage Lesson</p></a>
                <p class="date"><span class="ti-calendar"></span>August 20, 2018</p>
                <p class="time"><span class="ti-time"></span>15 days</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-3">
            <div class="tour-item">
              <a href="#">
                <div class="img-wrap">
                  <img src="img/distination-9.jpg" alt="">
                  <p class="price">1450 $</p>
                </div>
              </a>
              <div class="caption">
                <a href="#"><p class="title">Private Horseback Riding in Tegalalang</p></a>
                <p class="date"><span class="ti-calendar"></span>August 20, 2018</p>
                <p class="time"><span class="ti-time"></span>7 days</p>
              </div>
            </div>
          </div>

      </div>
    </div>

    <!-- / content -->

    <footer class="dark-footer"  style="background-image: url(img/image-20.jpg);">
      <div class="main-footer">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <div class="footer-item">
                <img width="110" src="img/logo-white.png" alt="Logo">
                <div class="mt-20 mb-20">
                  <button type="button" class="btn btn-1 btn-sm" data-toggle="modal" data-target="#newsletterModal">
                    Newsletter signup
                  </button>
                  <!-- Modal -->
                  <div class="modal fade bd-example-modal-sm" id="newsletterModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title" id="exampleModalLabel">Newsletter Signup</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <form id="subscribe-form" class="form-block" novalidate="novalidate">
                            <div class="form-group mt-20 subscribe-form">
                              <small id="emailHelp" class="form-text text-muted">Subscribe now and recieve a 50% discount on your next tour booking</small>
                              <label>Email address</label>
                              <input type="email" class="form-control" name="email" placeholder="Email">
                            </div>
                            <div class="mt-10 mb-10 float-right">
                              <button type="button" class="btn btn-2 btn-sm" data-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-1 btn-sm">Sign Up</button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              
              </div>
            </div>
            <div class="col-md-6">
              <div class="footer-item">
                <ul class="footer-menu">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Catalog</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
                <p class="mt-30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, aperiam consequuntur excepturi ab maiores reiciendis quo corporis maxime hic pariatur rerum deleniti deserunt aliquid modi, aliquam delectus veniam debitis molestiae.</p>
              </div>
            </div>
            <div class="col-md-3">
              <div class="footer-item">
                <ul class="mb-20">
                  <li>1800-2345-5677</li>
                  <li class="mt-10"><a href="mailto:">info@voyagetime.com</a></li>
                  <li class="mt-10">610 Broadway New York, NY 10012</li>
                </ul>
                
              </div>

              <div class="footer-item">
                <ul class="footer-social mt-20">
                  <li><a target="_blank" href="#"><i class="fab fa-pinterest"></i></a></li>
                  <li><a target="_blank" href="#"><i class="fab fa-facebook"></i></a></li>
                  <li><a target="_blank" href="#"><i class="fab fa-twitter"></i></a></li>
                  <li><a target="_blank" href="#"><i class="fab fa-instagram"></i></a></li>
                  <li><a target="_blank" href="#"><i class="fab fa-google-plus-g"></i></a></li>
                  <li><a target="_blank" href="#"><i class="fab fa-tumblr"></i></a></li>
                </ul>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-footer">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <p>@ 2018 <a href="http://www.17sucai.com/">VoyageTime</a></p>
            </div>
            <div class="col-md-6 text-r mobile-left">
              <p><img width="200" src="img/visa-mastercard-paypal.png" alt="Visa Mastercard Paypal"></p>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!-- SCROLL UP -->
    <a class="scrollup">
      <i class="icon-arrow-up icons"></i>
    </a>
    <!-- / SCROLL UP -->

    <!-- JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/moment.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/bootstrap-slider.min.js"></script>
    <script src="js/vendor/bootstrap-datetimepicker.min.js"></script> 
    <script src="js/vendor/owl.carousel.min.js"></script>
    <script src="js/vendor/navigation.js"></script>
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jqueryvalidation.js"></script>
    <script src="js/vendor/jquery.viewbox.min.js"></script> 
    <script src="js/vendor/masonry.min.js"></script> 
    <script src="js/vendor/imagesloaded.js"></script>
    <script src="js/vendor/jquery.waypoints.min.js"></script>
    <script src="js/vendor/jquery.sticky-kit.min.js"></script>
 
    <script src="js/main.js"></script>
  </body>
</html>
